<template>
    <div style="margin: 50px;border: gray 1px solid;width:800px;height: 800px;">
        <div :id="id" :name="id">sssssssssssssss</div>
        <textarea id="editor" rows="10" cols="80" >{{editerValue}}</textarea>
       <MenuTree :menuTree="menuTreedata" :menuKeys="menuKeys" :selectItem="selectItem" @selectEvent="selectEvent"></MenuTree>

       <!--复选框-->
        <CheckboxGroup v-model="checkbox" >
            <Checkbox :label="index" v-for="(item, index) in checkList" :key="index">
                <span>{{item}}</span>
            </Checkbox>
        </CheckboxGroup>

        <div v-html="html"></div>
        <div >{{html}}</div>
    </div>
</template>
<script>
    import CKEDITOR from "CKEDITOR"
    import MenuTree from '@/components/menuTree/menuTree.vue'
    export default {
        name: 'loading',
        components: {
            MenuTree
        },
        data: function () {
            return {
                html: '<h1>this is h1!</h1>',
                checkList: ['aaa', 'bbb', 'ccc'],
                checkbox: [],
                id: 'demo',
                editor: null,
                editerValue: 'this is try!',
                selectItem: 0,
                menuKeys: {
                    id: 'id',
                    name: 'name',
                    children: 'children'
                },
                menuTreedata: [
                    {
                        id: 1,
                        name: 'A1',
                        children: [
                            {
                                id: 2,
                                name: 'AA1',
                                children: []
                            },
                            {
                                id: 3,
                                name: 'AA2',
                                children: [
                                    {
                                        id: 4,
                                        name: 'AAA1',
                                        children: []
                                    },
                                    {
                                        id: 5,
                                        name: 'AAA2',
                                        children: []
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        id: 6,
                        name: 'B1',
                        children: []
                    },
                    {
                        id: 7,
                        name: 'C1',
                        children: [
                            {
                                id: 8,
                                name: 'CC1',
                                children: []
                            },
                            {
                                id: 9,
                                name: 'CC1',
                                children: []
                            }
                        ]
                    }
                ]
            }
        },
        created: function(){

        },
        mounted() {
          CKEDITOR.replace("editor", {height: "300px", width: "100%", toolbar: "Full"});
          this.editor = CKEDITOR.instances.editor;
        },
        methods: {
            selectEvent: function (id){
                this.selectItem = id;
                console.log(id);
            }
        }
    }
</script>
<style scoped>

</style>